<template>
  <div class="box">
    <van-sticky class="topsearch">
      <van-search v-model="iptVal" show-action placeholder="输入城市名或拼音" @search="onSearch" @input="onInput">
        <template #action>
          <div @click="onCancel">取消</div>
        </template>
      </van-search>
    </van-sticky>


    <div class="recently" v-if="blockShow==1">
      <div class="recently-title">离你最近</div>
      <ul class="recently-list">
        <li v-for="item in beforefivelist" :key="item.cinemaId" @click="toCinemaDetail(item.cinemaId)">
          <div class="recently-text">{{ item.name }}</div>
        </li>
      </ul>
    </div>


    <div class="cinemalist" v-if="blockShow==2">
      <ul>
        <li v-for="item in searchlist" :key="item.cinemaId" @click="toCinemaDetail(item.cinemaId)">
          <div class="cinema-lf">
            <div class="cinema-name">{{ item.name }}</div>
            <div class="cinema-address">{{ item.address }}</div>
          </div>
          <div class="cinema-rt">
            <div class="money">
              <span class="moneylf">￥{{ item.lowPrice/100.00 }}</span>
              <span class="moneyrt">起</span>
            </div>
            <div class="address">距离未知</div>
          </div>
        </li>
      </ul>
    </div>

    <div class="nolist" v-if="blockShow==3">
      <img src="../assets/cinema.png" alt="">
      <p>没有找到匹配的影院</p>
      <p>提示：仅支持搜索“影院”，建议您检查输入的影院名称是否有误？</p>
    </div>


  </div>
</template>

<script>
import http from '../request/http'
export default {
  name: 'CinemaSearch',
  data() {
    return {
      iptVal: '',
      // 原始电影院数据
      originalcinema: [],
      // 前五个的离你最近的电影院数据
      beforefivelist: [],
      // 区块显示(1代表离你最近区域，2代表搜索的列表,3代表啥也没搜到)
      blockShow: 1,
      arr: []
    }
  },
  computed: {
    searchlist() {
      if (this.iptVal.trim() == '') {
        this.blockShow = 1
        return []
      }
      const arr = this.originalcinema.filter((p) => {
        // return p.name.indexOf(this.iptVal) !== -1
        // return p.name.includes(this.iptVal) || p.address.includes(this.iptVal)
        return p.name.toUpperCase().includes(this.iptVal.trim().toUpperCase()) || p.address.toUpperCase().includes(this.iptVal.trim().toUpperCase())
      })
      this.arr = arr
      if (arr.length == 0) {
        this.blockShow = 3
        return []
      }

      return arr
    }
  },
  methods: {
    onInput() {
      this.blockShow = 2
    },
    onSearch() {
      if (this.arr.length == 0) {
        this.blockShow = 3
      }
    },
    onCancel() {
      this.$router.back()
    },
    toCinemaDetail(id) {
      this.$router.push('/cinemadetail/' + id)
    }
  },
  mounted() {
    http({
      url: `/gateway?cityId=${this.$store.state.cityId}&ticketFlag=1&k=7845835`,
      headers: {
        'X-Host': 'mall.film-ticket.cinema.list'
      }
    }).then(res => {
      if (res.status == 0) {
        this.originalcinema = res.data.cinemas
        this.beforefivelist = res.data.cinemas.splice(0, 5)
      }
    })
  }
}
</script>

<style scoped>
.topsearch {
  border-bottom: 1px solid #ededed;
}







.cinemalist {
  padding-bottom: .50rem;
}
.cinemalist li {
  position: relative;
  background-color: #fff;
  padding: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid #ededed;
}
.cinema-lf {
  width: calc(100% - .65rem);
  text-align: left;
  padding-right: .15rem;
  box-sizing: border-box;
}
.cinema-name {
  color: #191a1b;
  font-size: .15rem;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cinema-address {
  color: #797d82;
  font-size: .12rem;
  margin-top: 10px;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cinema-rt {
  width: .70rem;
  text-align: center;
  float: right;
  margin-right: -5px;
  box-sizing: border-box;
}
.moneylf {
  font-size: .15rem;
  text-align: center;
  color: #ff5f16;
  height: 0!important;
  display: inline-table!important;
}
.moneyrt {
  color: #ff5f16;
  font-size: .10rem;
  text-align: center;
}
.address {
  font-size: .11rem;
  color: #797d82;
  margin-top: 10px;
}





.recently {
  padding: 0 .15rem .08rem 0;
  margin-left: .15rem;
  position: relative;
  box-sizing: border-box;
}
.recently-title {
  font-size: .13rem;
  line-height: .13rem;
  color: #bdc0c5;
  margin: .18rem 0;
}
.recently-list {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  flex-wrap: wrap;
  color: #191a1b;
}
.recently-list li {
  text-align: center;
  padding-bottom: .10rem;
  padding-right: .10rem;
  box-sizing: border-box;
  float: left;
}
.recently-text {
  height: .30rem;
  background-color: hsla(0,0%,95.7%,.6);
  line-height: .14rem;
  border-radius: .03rem;
  box-sizing: border-box;
  font-size: .13rem;
  padding: .08rem .12rem;
  text-align: center;
}






.nolist {
  margin: 1.07rem auto;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}
.nolist img {
  width: .90rem;
  margin: auto;
  display: block;
  box-sizing: border-box;
}
.nolist p:nth-of-type(1) {
  color: #bdc0c5;
  padding: .02rem .50rem;
  line-height: 20px;
  font-size: .14rem;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
}
.nolist p:nth-of-type(2) {
  color: #bdc0c5;
  padding: .02rem .50rem;
  line-height: 20px;
  font-size: .11rem;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
}
</style>